<template>
  <footer class="index_footer">
    <nav>
      <ul class="index_nav_bar">
        <li class="navItem">
          <i class="iconfont">&#xe727;</i>
          <p>首页</p>
        </li>
        <li class="navItem">
          <i class="iconfont">&#xe71d;</i>
          <p>全部商品</p>
        </li>
        <li class="navItem">
          <i class="iconfont">&#xe714;</i>
          <p>我的订单</p>
        </li>
      </ul>
    </nav>
  </footer>
</template>

<script>
export default {
  name: 'HomeFooter'
}
</script>

<style lang="stylus" scoped>
@import "~style/varibles.styl"
.index_footer
  position: fixed;
  background: #fff;
  width: 100%;
  padding: .3rem 0 .2rem 0;
  bottom: 0;
  box-sizing: border-box;
  box-shadow: 3px -4px 10px #f2f2f2;
  .index_nav_bar
    flexRow()
    .navItem
      flexColumn()
      flex: 1;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      line-height: 1.2;
      i
        font-size: .5rem;
        line-height: .2rem;
      p
        margin-top: .2rem;
        font-size: .2rem;
</style>
